<template>
<div class="box-login">
<span class="qxi" @click="tui">取消</span>
 <div class="login-top">
    <span>不忘初心</span>
    <p>QQ音乐</p>
 </div>
 <div class="login-denglu">
<van-form validate-first @failed="onFailed"  @submit="onSubmit">
  <!-- 通过 pattern 进行正则校验 -->
   <van-field
    v-model="nickname"
    name="nickname"
    clearable
    placeholder="请输入昵称"
  />
  <van-field
    v-model="phone"
    label="手机号"
    name="phone"
    clearable
    placeholder="请输入手机号码"
    :rules="[{ pattern }]"
  />
  <!-- 通过 validator 进行函数校验 -->
 <van-field
  v-model="captcha"
  name="captcha"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <div class="msm" @click="msm">发送验证码</div>
  </template>
</van-field>
  <!-- 通过 validator 进行异步函数校验 -->
  <van-field
    v-model="password"
    name="password"
    label="密码"
    placeholder="密码"
    clearable
    required
    type="password"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      登陆
    </van-button>
  <div>
  </div>
  </div>
</van-form>
 </div>
</div>
</template>

<script>
import Vue from 'vue'
import { caPtcha, exisTence, CapTchas, WyRegister } from '@/api'
import { Form, Toast, Field, Button, Checkbox, CheckboxGroup } from 'vant'
Vue.use(Form)
Vue.use(Toast)
Vue.use(Button)
Vue.use(Field)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
export default {
  name: 'login',
  data () {
    return {
      phone: '',
      captcha: '',
      password: '',
      nickname: '',
      pattern: /\d{6}/,
      checked: false
    }
  },
  methods: {
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    },
    tui () {
      this.$router.push('Music')
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator (val) {
      return /1\d{10}/.test(val)
    },
    onSubmit (values) {
      Toast.loading('验证中...')
      // console.log('submit', values)
      // 检测是否已注册
      exisTence({ phone: this.phone }).then(res => {
        console.log(' 检测是否已注册', res)
        if (res.data.code === 200) {
          CapTchas({ phone: this.phone, captcha: this.captcha }).then(res => {
            console.log('验证手机状态码', res)
            if (res.data.code === 200) {
              // return new Promise((resolve, reject) => {
              /**
               * 注册
               * 选参数 :captcha: 验证码phone : 手机号码password: 密码nickname: 昵称接口地址 : /register/cellphone
               */
              WyRegister({
                captcha: this.captcha,
                phone: this.phone,
                password: this.password,
                nickname: this.nickname
              }).then(res => {
                console.log('注册', res)
                if (res.data.code === 200) {
                  Toast('成功')
                } else {
                  Toast(res.data.message)
                }
                Toast('注册成功')
                this.$router.replace('/login')
              })
              // resolve()
              // })
            } else {
              Toast(res.data.message)
            }
          })
        }
        // 如果状态码
        // 如果状态码为200那么就继续验证短信验证码
      })
      // this.$router.replace('/login')
    },
    msm (phone) {
      console.log('你可以发送验证码了')
      caPtcha({ phone: this.phone }).then(res => {
        console.log('发送短信验证', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-icon-success{
  border: 1px solid red;
}
.van-form{
  opacity: 0.8;
}
.van-cell{
  margin-top: 2px;
}
.van-button--info{
  border: 1px solid #ffcd32;
  background: #ffcd32;
}
.msm{
  border: 1px solid #ffcd32;
  width: 1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.12rem;
  color: #ffcd32;
}
 .qxi{
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    font-size: 0.1rem;
}
.box-login{
  background:url("./timg.jpg")no-repeat;
  background-size:cover;
  position: relative;
  height: 100%;
  .login-top{
    position: absolute;
    top: 0.2rem;
    margin-left: 25%;
    border: 1.5px solid #056948;
    border-radius: 15rem;
    width: 2rem;
    text-align: center;
    span{
      color: #056948;
    }
    p{
      font-size: 0.3rem;
      color: #056948;
    }
  }
  .login-denglu{
    position: absolute;
    bottom: 1rem;
    width: 100%;
    padding: 0.1rem;
  }
  .shenma{
    display: flex;
    justify-content: space-between;
    padding:0 0.2rem;
    font-size: 0.1rem;
  }
}
</style>
